<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>参数设置-从机设备：数据监控</title>
    <link rel="stylesheet" href="css/first.css">
    <link rel="stylesheet" href="layui/css/layui.css">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body style="padding: 10px;">
    <span class="layui-breadcrumb bread">
        <a href="">参数设置</a>
        <a href="">从机设备</a>
    </span>
    <div class="layuimini-container content" id="app">
        <div class="layuimini-main">
            <fieldset class="table-search-fieldset" style="margin: 10px;">
                <legend>数据监控</legend>
            </fieldset>

            <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
            <div class="layui-form layui-border-box layui-table-view" lay-filter="LAY-table-1" lay-id="currentTableId"
                >
                <div class="layui-table-tool">
                    <div class="layui-table-tool-self">
                        <div class="layui-inline" title="筛选列" lay-event="LAYTABLE_COLS"><i
                                class="layui-icon layui-icon-cols"></i></div>
                        <div class="layui-inline" title="导出" lay-event="LAYTABLE_EXPORT"><i
                                class="layui-icon layui-icon-export"></i></div>
                        <div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT"><i
                                class="layui-icon layui-icon-print"></i></div>
                        <div class="layui-inline" title="提示" lay-event="LAYTABLE_TIPS"><i
                                class="layui-icon layui-icon-tips"></i></div>
                    </div>
                </div>
                </div>
            </div>   
        </div>
    </div>
    <div class="backbox">
        <div class="tanchuang">
          <!-- 弹窗头部的内容 -->
        <div class="headerbox"> 
            <div style="font-size: 20px; text-align: center; margin: 15px;">下发控制</div>       
        </div>
        <!-- 弹窗内容 -->
        <div class="contentbox">    
            <div class="layui-form-item">
                <label class="layui-form-label" style="margin-left: -25px; font-size: 15px;">数值</label>
                <div class="layui-input-block" style="margin-left: 55px; width: 300px;">
                  <input id="inputValue" type="text" name="title" required  lay-verify="required" placeholder="请输入数值" autocomplete="off" class="layui-input">
                </div>
              </div>
        </div>
        <!-- 弹窗下面确定关闭按钮 -->
        <div class="footerbox">
            <button id="update" type="button" class="layui-btn layui-btn-normal">确定</button>
            <button id="cancel" type="button" class="layui-btn layui-btn-primary">取消</button>
        </div>
    </div>
    </div>
    
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="./layui/layui.js"></script>
     <!-- import Vue before Element -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        $(".listspan").click(function () {
            var src = $(this).attr('href');
            window.open(src, '_self');
        });
        layui.use('element', function () {
            var element = layui.element;
            //导航的hover效果、二级菜单等功能，需要依赖element模块
            //导航点击事件
            element.on('nav(demo)', function (elem) {
                layer.msg(elem.text());
            });
        });
        layui.use(['form', 'table'], function () {
            var $ = layui.jquery,
                form = layui.form,
                table = layui.table,
                layuimini = layui.layuimini;
                // var dev1=''
                $.ajax({
                url: "http://127.0.0.1:8080/api/v1/node/val",
                type: "get",
                data: { devId: 'dev1'},
                dataType: "json",
                success: function (res) {
                    console.log(res);
                    // var json = JSON.parse(res.data)
                    // console.log(json);
                    table.render({
                        elem: '#currentTableId',
                        toolbar: '#toolbarDemo',
                        data: res.Data,
                        defaultToolbar: ['filter', 'exports', 'print', {
                            layEvent: 'LAYTABLE_TIPS',
                            icon: 'layui-icon-tips'
                        }],
                        cols: [[
                            // { type: "checkbox", width: 50, fixed: "left" },
                            // { field: 'id', width: 120, title: '编号', sort: true },
                            // {
                            //     field: 'Name', width: 220, title: '名称', templet: function (data) {
                            //         return "<input type=\"text\" name=\"applyreason\" value=" + data.Name + ">"
                            //     }
                            // },
                            { field: 'ID', width: 220, title: '标识', sort: true, align: "center" },
                            { field: 'Name', width: 220, title: '名称', sort: true, align: "center" },
                            { field: 'TimeStamp', width: 220, title: '更新时间', sort: true, align: "center" },
                            { field: 'Value', width: 220, title: '值', sort: true, align: "center" },
                            { title: '操作', minWidth: 220, toolbar: '#currentTableBar', fixed: "right", align: "center" }
                        ]],
                        // limits: [10, 15, 20, 25, 50, 100],
                        limit: 10,
                        page: true
                    });
                    
                },
                error: function () {
                    alert("请求失败！")
                }
            });
        }); 
            var table = layui.table;
           table.on('tool(suspect-tab)', function (obj) {
            console.log(doSomething);
        });
        // 操作设置弹窗按钮
        let dataobj={
            "DevId": "",
            "NodeId": "",
            "Val": ""
        }
        function dbclick(a,b,c){
            console.log(a,this)
            dataobj.DevId=a
            dataobj.NodeId=b
            dataobj.Val=c
            $("#inputValue").val(c);
            $(".backbox").show(100);
           
        
        }
        // 取消按钮
        $("#cancel").click(function(){
            $(".backbox").hide(100)
        });
         // 确定修改按钮
        $("#update").click(function(){
            dataobj.Val=$("#inputValue").val();
            $.ajax({
                url: "http://127.0.0.1:8080/api/v1/node/val",
                type: "put",
                data: dataobj,
                dataType: "json",
                success: function (res) {
                    if (res.Code==0) {
                        console.log('修改',res)
                        layer.msg('修改成功', {icon: 1,skin: 'success-class'});
                    }else{
                        layer.msg(res.Message, {icon: 1,skin: 'success-class'});
                    }   
                },
                error: function () {
                    alert("请求失败！")
                }
            });
            $(".backbox").hide(100)
        });
        

    </script>
    <script type="text/html" id="currentTableBar">
        <!-- <button id="setButton" type="button" class="layui-btn layui-btn-xs layui-btn-normal">设置</button> -->
        <a class="iconfont icon-xiangqing  layui-btn layui-btn-xs data-count-edit" title="设置" lay-event="suspect-details" onclick="dbclick('{{d.ID}}','{{d.AccessMode}}','{{d.Value}}')">设置</a>
        <!-- <a id="setButton" class="layui-btn layui-btn-xs data-count-edit" lay-event="switch" lay-filter="statusDemo">设置</a> -->
        <!-- <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a> -->
    </script>
</body>

</html>